<template>
	<!-- 
	 my-tabs 是一个通用的组件
	 1.可以在父组件中制定样式
	 2.可以在父组件中指定数据
	 3.可以在父组件中选中项
	 -->
	<view class="tab-container">
		<view class="tab-box">
			<scroll-view scroll-x class="scroll-view" scroll-with-animation>
				<view class="scroll-content">
					<view class="tab-item-box">
						<!-- 
						小程序： wx:for="{{arr}}" defualt 变量名 item ， 下标index
						uniapp: 遵循 vue 的 v-for 指令
						v-for="(iten,index) in arr" :key = "index"
						 -->
						<block v-for="(item,index) in tabData" :key="index">
							<view class="tab-item" 
							:class="{'tab-item-active' : activeIndex === index}"
							@click="onTabClick(index)"
							>{{item.label || item}}</view>
						</block>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>

	export default {
		name:"my-tabs",
		props:{
			// 1.可以在父组件中制定样式 
			// 配置对象
			config:{
				type:Object,
				// default 如果是复杂数据类型，那么需要指定value为一个函数，通过返回值的形式执行默认值
				default:() => {
					return {};
				}
			},
			// 2.可以在父组件中指定数据
			tabData:{
				type:Array,
				default:()=>{
					return{}
				}
			},
			// 3.可以在父组件中选中项
			defaultIndex:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				// 当前激活的index
				activeIndex:-1
			};
		},
		// watch 侦听器
		watch:{
			// 监听激活项目的变化
			defaultIndex:{
				handler(val){
					this.activeIndex = val
				},
				// 该回调回在真挺开始之后被立即调用
				immediate:true
			}
		},
		methods:{
			onTabClick(index){
				this.activeIndex = index
			}
		}


	}
</script>

<style lang="scss" scoped>
.tab-container {
  font-size: $uni-font-size-base;
  height: 45px;
  line-height: 45px;
  background-color: $uni-bg-color;
  .tab-box {
    width: 100%;
    height: 45px;
    display: flex;
    position: relative;
    .scroll-view {
      white-space: nowrap;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      .scroll-content {
        width: 100%;
        height: 100%;
        position: relative;

        .tab-item-box {
          height: 100%;
          .tab-item {
            height: 100%;
            display: inline-block;
            text-align: center;
            padding: 0 15px;
            position: relative;
            text-align: center;
            color: $uni-text-color;
			&-active{
				color: $uni-text-color-hot;		  
			}
          }

        }
      }
    }
  }
}
</style>